<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 600px;
            height: 300px;

            /* 字体 */
            font-size: 30px;
            font-weight: bold;
            font-family: 楷体;
            font-style: italic;

            /* 文本 */
            color: #666;
            /* 
                RGB：Red Green Blue
                表示：#RRGGBB
                红 #FF0000  #F00
                蓝 #0000ff
                黑 #000000  #000
                白 #ffffff  #fff
                橙 #ff7300  不能简写
                灰 #666666 #666
                #334455 #345

                简写：当每种颜色的两位都相同时可以简写
            */

            /* 文本的垂直居中：将line-height与height设置为相同 */
            line-height: 200px;

            text-align: center;

            text-decoration: underline;

            /* 背景 */
            /* background-color: pink;
            background-image: url("../HTML代码/images/avatar.png");
            background-repeat: no-repeat; */
            /* background-position: right center; */
            /* background-position: 100px -50px; */
            /* background: pink url("../HTML代码/images/avatar.png") no-repeat 100px -50px; */
            background: pink;
        }

        img{
            vertical-align: middle;
        }

        li{
            /* 设置列表前的标记 */
            list-style: none;
            /* 浮动 */
            float: left;

            width: 90px;
            height: 40px;
            background: #3071f2;
            text-align: center;
            line-height: 40px;
        }
        li a:link,li a:visited{
            text-decoration: none;
            color: white;
        }
        li a:hover,li a:active{
            font-weight: bold;
            text-decoration: underline;
            margin-bottom: 5px;
        }


    </style>
</head>
<body>
    <div class="container">中国</div>
    <p>bbb</p>
    <span>ccc</span>
    <img src="../HTML代码/images/1.png">

    <!-- ul>li{li$}*6 -->
    <ul>
        <li><a href="#">财经</a></li>
        <li><a href="#">科技</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">体育</a></li>
        <li><a href="#">军事</a></li>
        <li><a href="#">汽车</a></li>
    </ul>

   


</body>
</html>